<meta charset="UTF-8">
<title>carousel</title>

<div class="carousel">
	<div>
		<div>
			<a href="topic/?id=283">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150919114717260.jpg">
			</a>
		</div>
		<div style="left:50%;">
			<a href="live/?id=3">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150918214948448.png">
			</a>
		</div>
		<div style="left:100%;">
			<a href="topic/?id=346">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150910171423733.png">
			</a>
		</div>
		<div style="left:150%;">
			<a href="topic/?id=345">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150909172539065.jpg">
			</a>
		</div>
		 
	</div>
</div>

<style>
	.carousel{
		height:250px;
		width:600px;
		overflow:hidden;
		position: relative;
	}
	
	.carousel > div{ /* mover */
		left:0;
		position: relative;
		
		white-space: nowrap;
		width : 200%;
	}
	
	.carousel > div > div{
		position:absolute;
		
		transition :left 900ms linear;
		width : 50%;
	}
	.carousel > div > div img {
		width: 100%;
	}
	
	.hide{
		display:none;
	}
</style>

<script>
Function.prototype.delegate = function () {  
    var self = this, scope = this.scope, args = arguments, aLength = arguments.length, fnToken = 'function';  
  
    return function(){  
        var bLength = arguments.length, Length = (aLength > bLength) ? aLength : bLength;  
  
        // mission one:  
        for (var i = 0; i < Length; i++)  
            if (arguments[i])args[i] = arguments[i]; // 拷贝参数  
  
        args.length = Length; // 在 MS jscript下面，arguments作为数字来使用还是有问题，就是length不能自动更新。修正如左:  
  
        // mission two:  
        for (var i = 0, j = args.length; i < j; i++) {  
            var _arg = args[i];  
            if (_arg && typeof _arg == fnToken && _arg.late == true)  
                args[i] = _arg.apply(scope || this, args);  
        }  
  
        return self.apply(scope || this, args);  
    };  
};  
function Carousel(el) {
	var containerWidth = el.clientWidth, 
		mover = el.querySelector('div'),
		items = mover.children, len = items.length;
	
    var count = 0;

	
	var max = 0
	window.runTo = function (targetIndex){
		var move;
		if(targetIndex > count){
			move = '-100%';
			
		}else{
			move =  '0%';
		}
	
		var current;
		for(var p = 0; p < len; p++){
			if(p == count){// 当前显示的
				//current = items[p];
				//current && (current.className = '');
				//items[p].className = '';
				//items[p].style.transition = 'left 900ms linear';
				
				
				max++;
				items[p].style.left = '-' + max * 50 + '%';
				items[p + 1].style.left = (max -1 ) + '%';
			}else if(p == targetIndex){// 要显示的
				
				
				//items[p].style.transition = 'left 900ms linear';
				//items[p].style.left = '0';
			}else{	
				//items[p].className = 'hide';
			}
		}
		
		//mover.style.transition = 'left 900ms linear';
		//mover.style.left = move;
		
		count = targetIndex;

    }
    //setInterval(run, 4000);
}

Carousel.onEnd = function(){}
	
new Carousel(document.querySelector('.carousel'));
</script>
